<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="realAuth h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" color="#FFFFFF" title="实名认证" left-icon="left" @clickLeft="back" />
    </view>
    <view class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="contentWithFooter" :style="contentWithFooterStyle">
        <view v-if="formData.auditStatus === '3'" class="titleBox flc">
          <view class="title cYE f16 bold">审核中...</view>
          <view class="content cGY2 f16">您提交的信息正在审核中，请耐心等待</view>
        </view>
        <view v-if="formData.auditStatus === '2'" class="titleBox flr">
          <view class="titleLeft flc">
            <view class="title cRD f16 bold">未通过</view>
            <view class="content cGY2 f16">{{ formData.auditReason }}</view>
          </view>
          <view class="titleRight fle flcv">
            <view class="contrctService">联系客服</view>
          </view>
        </view>
        <view class="common_form" :class="{ formNoBorder: !formData.auditStatus || formData.auditStatus === '1' }">
          <uni-forms ref="form" :modelValue="formData" class="">
            <uni-forms-item label="联系人" label-width="100px" name="realName">
              <view class="flr fla flb">
                <input type="text" v-model="formData.realName" class="input" placeholder="请输入联系人" />
              </view>
            </uni-forms-item>
            <view class="content_line"></view>
            <UploadFile uploadFileType="img" :disabled="!showFixedBottom" :picsUrl="formData.cardUrl" title="上传名片" :limit="1" @setFileInfo="getImgUrl" />
          </uni-forms>
        </view>
      </view>
      <FixedBottomBtn v-if="showFixedBottom" @btnFun="submit" />
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
import UploadFile from '@/component/UploadFile.vue';
export default {
  mixins: [commonMxins],
  data() {
    return {
      showFixedBottom: true,
      formData: {
        realName: '',
        cardUrl: ''
      }
    };
  },
  components: { UploadFile, FixedBottomBtn },
  onLoad() {
    this.getAuthInfo();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async getAuthInfo() {
      let rep = await api.request({ url: '/appUser/queryRealNameInfo', method: 'GET' });
      if (rep.data) {
        this.formData = { ...rep.data };
      }
      this.showFixedBottom = !this.formData.auditStatus || this.formData.auditStatus === '2';
    },
    async submit() {
      if (this.formData.realName && this.formData.cardUrl) {
        let resp = await api.request({ url: '/appUser/submitRealNameApply', data: { ...this.formData } });
        if (resp.code === 200) {
          uni.showToast({ title: '提交成功', icon: 'success', duration: 1500 });
          this.getAuthInfo();
        } else {
          uni.showToast({ title: '提交失败', icon: 'error', duration: 1500 });
        }
      } else {
        uni.showToast({ title: '请先填全信息', icon: 'none', duration: 1500 });
      }
    },
    getImgUrl(val) {
      this.formData.cardUrl = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.realAuth {
  .contentBox {
    position: relative;
    .contentWithFooter {
      .titleBox {
        padding: 12rem;
        box-sizing: border-box;
        .titleLeft {
          width: 300rem;
        }
        .titleRight {
          width: calc(100% - 300rem);
          .contrctService {
            width: 88rem;
            height: 32rem;
            font-size: 14rem;
            text-align: center;
            line-height: 32rem;
            border-radius: 50rem;
            border: 1rem solid rgba(255, 124, 0, 1);
            color: rgba(255, 124, 0, 1);
          }
        }
        .title {
          line-height: 24rem;
        }
        .content {
          line-height: 24rem;
        }
      }
      .common_form /deep/ {
        .uni-forms {
          border-top: 1rem solid #ff7c00;
          border-top-left-radius: 20rem;
          border-top-right-radius: 20rem;
        }
        .uni-forms-item {
          width: 402rem;
          padding: 0 14rem;
          height: 60rem;
          margin-bottom: 0;
        }
        .uni-forms-item__label {
          height: 60rem !important;
          font-size: 16rem !important;
          color: rgba(56, 56, 56, 1) !important;
          text-align: left;
          line-height: 60rem !important;
        }
        .uni-forms-item__content {
          input {
            height: 60rem;
            width: calc(100% - 50rem);
          }
          .uni-icons {
            color: rgba(166, 166, 166, 1) !important;
          }
          text {
            font-size: 14rem;
            font-weight: 400;
            color: rgba(166, 166, 166, 1);
          }
        }
      }
      .formNoBorder /deep/ {
        .uni-forms {
          border-top: none;
        }
      }
      // 表单间距下划线
      .content_line {
        width: 430rem;
        height: 0rem;
        border-top: 1rem solid rgba(229, 229, 229, 1);
      }
    }
  }
  .fixedFooter {
    width: 100%;
    padding: 12rem;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    .footer {
      width: 100%;
      padding: 12rem;
      height: 44rem;
      box-sizing: border-box;
      background: #ff7c00;
      color: #ffffff;
      font-size: 16rem;
      line-height: 24rem;
      text-align: center;
      border-radius: 50rem;
    }
  }
}
</style>
